<script lang="ts" setup>
import { ref } from 'vue';
import StudyHeader from './components/StudyHeader.vue';
import CardMarket from './components/StudyMarket.vue';
import NormalHeader from '@/components/NormalHeader.vue';

const cardType = ref<string>('技能树');

const changeCardType = (type: string) => {
  cardType.value = type;
};
</script>

<template>
  <div class="index-container">
    <NormalHeader title="学习广场" />
    <a-layout>
      <StudyHeader :card-type="cardType" @change-card-type="changeCardType" />
      <div class="scroll-container">
        <CardMarket :card-type="cardType" />
      </div>
    </a-layout>
  </div>
</template>

<style scoped lang="scss">
.index-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 占满整个视口高度 */
}

.scroll-container {
  margin-top: 10px;
  flex: 1; /* 占据剩余空间 */
  overflow-y: auto; /* 仅在垂直方向上滚动 */
  padding: 10px; /* 可选：添加内边距 */
}

/* 可选：隐藏滚动条样式（根据需要） */
/*
.scroll-container::-webkit-scrollbar {
  width: 0;
  height: 0;
}
*/
</style>
